Minicurso
XIII Jornada de Educação, Ciência e Tecnologia
IFMG - Campus Formiga
23 de outubro de 2024
Tópicos
Quarto Dashboards.
Aplicativos Web com shiny.
Dashboards com shiny e shinydashboard.d
Disponíveis desde a versão Quarto 1.4!
Dashboards são compostos por cards.
Unidade fundamental de exibição dentro dos painéis
Cards são organizados em rows e columns.
Pages, tabsets, e sidebars permitem layouts mais avançados.
format: dashboard
Para inserir informações sobre o dashboard, os dados, etc. e/ou para entradas do usuário em dashboards interativos.
Pode ser inserida globalmente ou em uma página.
dashboard-r.qmd
---
title: "Sidebars - Global"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
# {.sidebar}
As informações e/ou interatividade que você deseja em todas as páginas
vão aqui.
# Scatter
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
# Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```dashboard-r.qmd
---
title: "Sidebars - Global"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
# {.sidebar}
As informações e/ou interatividade que você deseja em todas as páginas
vão aqui.
# Scatter
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
# Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```dashboard-r.qmd
---
title: "Sidebars - Global"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
# {.sidebar}
As informações e/ou interatividade que você deseja em todas as páginas
vão aqui.
# Scatter
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
# Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```dashboard-r.qmd
---
title: "Sidebars - Per page"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
# Scatter
## {.sidebar}
As informações e/ou interatividade que você deseja em uma única página
vão aqui.
##
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
# Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```dashboard-r.qmd
---
title: "Sidebars - Per page"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
# Scatter
## {.sidebar}
As informações e/ou interatividade que você deseja em uma única página
vão aqui.
##
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
# Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```dashboard-r.qmd
---
title: "Sidebars - Per page"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
# Scatter
## {.sidebar}
As informações e/ou interatividade que você deseja em uma única página
vão aqui.
##
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
# Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```Por padrão, os cards são dispostos em linhas:
O valor padrão da chave orientation é rows:
dashboard-r.qmd
Definir orientation como columns faz com que cada ## indique uma coluna em vez de uma linha:
dashboard-r.qmd
dashboard-r.qmd
dashboard-r.qmd
---
title: "Tabsets"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
## Visão Geral {.tabset}
### Objetivo
Este painel resume uma análise sobre a economia de combustível de
carros.
### Carro
Isto é um carro
{fig-alt="Ilustração de um carro." width="299"}
## Gráficos {.tabset}
### Scatter
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
### Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```Cada card dentro de uma linha/coluna ou cada linha/coluna dentro de outra se torna uma aba:
dashboard-r.qmd
---
title: "Tabsets"
format:
dashboard:
logo: img/fusca.jpeg
---
```{r}
library(ggplot2)
```
## Visão Geral {.tabset}
### Objetivo
Este painel resume uma análise sobre a economia de combustível de
carros.
### Carro
Isto é um carro
{fig-alt="Ilustração de um carro." width="299"}
## Gráficos {.tabset}
### Scatter
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
### Bar
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```Value boxes são uma ótima maneira de exibir valores simples de forma proeminente em um painel.
Você pode criar caixas de valor em células executáveis ou markdown simples em divs.
Value boxes usam ícones Bootstrap https://icons.getbootstrap.com e podem ser definidas para qualquer cor (por exemplo, com um código HEX)
| Color alias | Default theme color(s) |
|---|---|
primary |
Azum |
secondary |
Cinza |
success |
Verde |
info |
Azul brilhante |
warning |
Amarelo/Laranja |
danger |
Vermelho |
light |
Cinza claro |
dark |
Preto |
Shiny é um pacote R que facilita a criação de aplicativos web interativos com a linguagem R. Você pode hospedar aplicativos shiny em uma página da web ou incorporá-los em documentos Quarto, ou criar dashboards. Você também pode estender seus aplicativos Shiny com CSS, htmlwidgets e JavaScript.
Características
As atualizações são baseadas nos inputs e na interação com o usuário.
Composto por dois componentes: User Interface (UI) & Server
# Carrega os pacotes
library(tidyverse)
library(shiny)
# Importa os dados
dados <- readr::read_csv(here::here("dados/dados_vendas.csv"))
# Define a interface do usuário
ui = fluidPage(
titlePanel("Receita Diária nas Cidades"),
sidebarLayout(
sidebarPanel(
radioButtons(
"Cidade", "Selecione uma cidade",
choices = c(
"Formiga",
"Arcos",
"Pimenta",
"Piumhi"
)
)
),
mainPanel(
plotOutput("plot")
)
)
)
# Cria função que define as operações no servidor
server = function(input, output, session) {
output$plot = renderPlot({
dados |>
filter(Cidade %in% input$Cidade) |>
ggplot(aes(x = Data, y = Receita)) +
geom_line() +
theme_minimal()
})
}
# Executa o Aplicativo
shinyApp(ui = ui, server = server)Características
O shinydashboard facilita o uso do Shiny para criar dashboards.
Um (shiny)dashboard tem três partes:
um Cabeçalho;
uma Barra Lateral e;
um Corpo.
# Carrega os pacotes
library(shiny)
library(shinydashboard)
# Define as Partes do Dashboard
ui <- dashboardPage(
dashboardHeader(), # cabeçalho
dashboardSidebar(), # barra lateral
dashboardBody() # corpo
)
# Função personalizada executada no servidor (backend)
server <- function(input, output) { }
# Executa o App
shinyApp(ui, server)“Os estudantes não sabem o que precisam saber até que precisem saber.”
The Handbook for Economics Lecturers.